<template>
	<div class="index_container">
		<el-row :gutter="20" type="flex">
			<el-col :span="12">
				<template v-if="roleType === 'user'">
					<member-project></member-project>
				</template>
				<template v-if="roleType === 'pi'">
					<principal-project></principal-project>
				</template>
				<template v-if="roleType === 'manager'">
					<manager-project></manager-project>
				</template>
				<template v-if="roleType === 'maintain'">
					<experiment-schedule></experiment-schedule>
				</template>
			</el-col>
			<el-col :span="12">
				<announcement></announcement>
			</el-col>
		</el-row>
		<el-row :gutter="20" type="flex">
			<el-col :span="12">
				<common-question></common-question>
			</el-col>
			<el-col :span="12">
				<contact-info></contact-info>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import contactInfo from './contactInfo';
import announcement from './announcement';
import memberProject from './memberProject';
import managerProject from './managerProject';
import commonQuestion from './commonQuestion';
import principalProject from './principalProject';
import experimentSchedule from './experimentSchedule';
export default {
	components: { memberProject, managerProject, principalProject, experimentSchedule, announcement, commonQuestion, contactInfo },
	computed: {
		...mapGetters(['userInfo']),
		roleType() {
			let roles = this.userInfo.roleList;
			if (roles.length === 0) {
				return 'manager';
			} else if (roles.length === 1) {
				if (roles[0] === 1) {
					return 'manager';
				} else if (roles[0] === 2) {
					return 'manager';
				} else if (roles[0] === 3) {
					return 'pi';
				} else if (roles[0] === 4) {
					return 'user';
				} else if (roles[0] === 5) {
					return 'maintain';
				}
			} else {
				if (roles.some((n) => n === 1)) {
					return 'manager';
				} else if (roles.some((n) => n === 2)) {
					return 'manager';
				} else if (roles.some((n) => n === 3)) {
					return 'pi';
				} else if (roles.some((n) => n === 4)) {
					return 'user';
				} else if (roles.some((n) => n === 5)) {
					return 'maintain';
				}
			}
		}
	},
	watch: {
		roleType: {
			handler(val) {},
			immediate: true
		}
	}
};
</script>

<style lang="scss" scoped>
.index_container {
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	.el-row {
		margin-top: 20px;
		&:first-child {
			margin-top: 0;
		}
	}
}
</style>
